<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <title>Only Frozen</title>
    <link rel="stylesheet" href="css/odometer-theme-default.css"/>
    <script src="js/odometer.min.js"></script>
    <style>
        .number-container{
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            width: 100%;
            height: 100%;
            text-align: center;
            transform: translateZ(0px);
            margin: auto;
            color: rgb(68, 68, 68);
            background: rgb(238, 238, 238);
            font-family: proxima-nova, "Helvetica Neue", sans-serif;
        }

        .odometer_d,.odometer_h,.odometer_m,.odometer_s,.odometer_desc{

            text-align: center;
            display: block;
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            line-height: 1.1em;
            transform: translateZ(0px);
            display:inline-block;
            vertical-align:middle;
            margin:auto;
            top: 40%;
            font-size: 50%;
            font-family: "Helvetica Neue", sans-serif;
        }

    </style>
    <script>
        (function(doc, win) {
          var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            if(clientWidth >= 750) {
              docEl.style.fontSize = '100px';
            } else {
              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
          };
          if(!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

    </script>
</head>

<body>
    <div class="number-container">
        <div id="odometer_d" class="odometer_d"></div>
        <div id="odometer_desc_d" class="odometer_desc"> 天</div>
        <div id="odometer_h" class="odometer_h"></div>
        <div id="odometer_desc_h" class="odometer_desc"> 时</div>
        <div id="odometer_m" class="odometer_m"></div>
        <div id="odometer_desc_m" class="odometer_desc"> 分</div>
        <div id="odometer_s" class="odometer_s"></div>
        <div id="odometer_desc_s" class="odometer_desc"> 秒</div>
    </div>
    <script>

    var d1 = new Date('2020/01/28 00:00:00');
    var d2 = new Date();
    var year = d2.getFullYear(); //获取完整的年份(4位,1970-????)
    var month = d2.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    var today = d2.getDate(); //获取当前日(1-31)
    var hour = d2.getHours(); //获取当前小时数(0-23)
    var minute = d2.getMinutes(); //获取当前分钟数(0-59)
    var second = d2.getSeconds(); //获取当前秒数(0-59)

    var el_d = document.querySelector('.odometer_d');
    var el_h = document.querySelector('.odometer_h');
    var el_m = document.querySelector('.odometer_m');
    var el_s = document.querySelector('.odometer_s');

    od_d = new Odometer({
      el: el_d,
      value: parseInt(parseInt(d2 - d1) / 1000 / 60 / 60 / 24) ,
      format: '(ddd)'
    });

    od_h = new Odometer({
      el: el_h,
      value: hour ,
      format: 'd'
    });

    od_m = new Odometer({
      el: el_m,
      value: minute ,
      format: 'd'
    });

    od_s = new Odometer({
      el: el_s,
      value: second ,
      format: 'dd'
    });


    setInterval(function(){
        var d1 = new Date('2020/01/28 00:00:00');
        var d2 = new Date();
        var year = d2.getFullYear(); //获取完整的年份(4位,1970-????)
        var month = d2.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var today = d2.getDate(); //获取当前日(1-31)
        var hour = d2.getHours(); //获取当前小时数(0-23)
        var minute = d2.getMinutes(); //获取当前分钟数(0-59)
        var second = d2.getSeconds(); //获取当前秒数(0-59)
        od_d.update(parseInt(parseInt(d2 - d1) / 1000 / 60 / 60 / 24))
        od_h.update(hour)
        od_m.update(minute)
        od_s.update(second)
    }, 1000);



    </script>

</body>

</html>


